import 'package:flutter/material.dart';
import 'package:identification_photo/base/provider_widget.dart';
import 'package:identification_photo/config/constants.dart';
import 'package:identification_photo/utils/file_util.dart';
import 'package:identification_photo/utils/screen_util.dart';
import 'package:identification_photo/view_model/home_view_model.dart';

class HomePage extends StatefulWidget {
  final Map<String, dynamic>? arguments;

  const HomePage({Key? key, this.arguments}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late HomeViewModel model;

  @override
  void initState() {
    super.initState();
    model = HomeViewModel();
  }

  @override
  Widget build(BuildContext context) {
    ScreenHelper.int(context);
    return ProviderWidget<HomeViewModel>(
        model: model,
        onModelReady: (model) async {
          await model.onLoad();
        },
        builder: (context, model, child) {
          if (model.isBusy()) {
            return Scaffold(
              appBar: AppBar(),
              body: const Center(
                child: CircularProgressIndicator(),
              ),
            );
          } else if (model.isError()) {
            return Scaffold(
              appBar: AppBar(),
              body: Container(
                width: double.infinity,
                padding: EdgeInsets.all(ScreenHelper.width(18)),
                child: const Center(child: Text("出错了!!!")),
              ),
            );
          }
          return Scaffold(
            appBar: AppBar(
              title: const Text("免冠照制作"),
              centerTitle: true,
            ),
            body: SafeArea(
                bottom: true,
                child: Container(
                  padding: EdgeInsets.all(ScreenHelper.width(18)),
                  width: double.infinity,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                          child: ListView(
                        children: [
                          if (model.finalImgBuffer == null)
                            _buildDefaultTopWidget()
                          else
                            _buildFinalTopWidget(),
                        ],
                      )),
                      _buildFootWidget(),
                    ],
                  ),
                )),
          );
        });
  }

  _buildFootWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        TextButton(
            onPressed: () => model.finalImgBuffer == null
                ? model.getPicPath(ImageFrom.gallery)
                : model.clean(),
            child: Text(model.finalImgBuffer == null ? '从相册选择' : '返回')),
        TextButton(
            onPressed: () => model.finalImgBuffer == null
                ? model.getPicPath(ImageFrom.camera)
                : model.savePic(),
            child: Text(model.finalImgBuffer == null ? '直接拍摄' : '保存图片')),
      ],
    );
  }

  ///默认初始的效果
  _buildDefaultTopWidget() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Image.asset(
          FileUtil.wrapImageAssets("examplePhoto.png"),
          width: ScreenHelper.width(
              model.photoPixel[model.pixelSelect]["ratioX"] / 3),
          height: ScreenHelper.width(
              model.photoPixel[model.pixelSelect]["ratioY"] / 3),
        ),
        Container(
          margin: EdgeInsets.only(top: ScreenHelper.width(18)),
          padding: EdgeInsets.all(ScreenHelper.width(9)),
          color: Colors.grey,
          width: double.infinity,
          child: Text(
            model.tipInfo,
            style: const TextStyle(
                fontSize: 15, fontWeight: FontWeight.w400, height: 1.5),
          ),
        ),
        ...photoSizeInfo
            .map(
              (value) => RadioListTile(
                visualDensity: VisualDensity.compact,
                title: Text(
                  value,
                  style: const TextStyle(fontSize: 13),
                ),
                groupValue: model.pixelSelect,
                value: photoSizeInfo.indexOf(value),
                onChanged: (value) {
                  model.selectPixel(value);
                },
              ),
            )
            .toList(),
      ],
    );
  }

  ///最终的呈现效果
  _buildFinalTopWidget() {
    return SizedBox(
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.memory(
            model.finalImgBuffer!,
            width: ScreenHelper.width(
                model.photoPixel[model.pixelSelect]["ratioX"] / 2),
            height: ScreenHelper.width(
                model.photoPixel[model.pixelSelect]["ratioY"] / 2),
          ),
          SizedBox(
            height: ScreenHelper.width(9),
          ),
          ...model.colorList.map((e) => RadioListTile(
              title: Container(
                width: ScreenHelper.width(10),
                height: ScreenHelper.width(30),
                color: e,
                child: Text("背景颜色为$e"),
              ),
              value: e,
              groupValue: model.selectColor,
              onChanged: (value) => {model.buildPic(color: e)}))
        ],
      ),
    );
  }
}
